vue实现自定义指令

您所在的位置：网站首页 › vue 自定义指令实现v-if › vue实现自定义指令

vue实现自定义指令

#vue实现自定义指令| 来源: 网络整理| 查看: 265

自定义指令什么是指令？注册自定义指令的语法注册全局自定义指令注册局部自定义指令钩子函数作用函数种类注意（一般初始化元素属性用bind，使用js的方法，应该用inserted和updated）函数参数实例自定义函数的缩写

什么是指令？

在Vue中指令有v-cloak,v-text,v-on,v-bind,v-for。。。。这些统统都是指令，每个指令都有不同作用

注册自定义指令的语法注册全局自定义指令

在这里插入图片描述

注册局部自定义指令

在这里插入图片描述

钩子函数作用

当使用自定义指令时触发的回调函数

函数种类函数名称作用bind只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置inserted被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)updated所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新注意（一般初始化元素属性用bind，使用js的方法，应该用inserted和updated）函数参数

在这里插入图片描述

实例 default 实现自定指令聚焦 var vm=new Vue({ el:'#app', data:{ msg:'' }, directives:{ focus:{ inserted:function(el){ el.focus() } }, color:{ bind:function(el,binding){ el.style.color=binding.value; console.log(binding) el.value=binding.modifiers.blod } } } })

在这里插入图片描述

自定义函数的缩写

在很多时候，你可能想在bind 和update时触发相同行为,不关它的钩子。比如这样写:

Vue.directive('color-swatch', function (el, binding) { el.style.backgroundColor = binding.value })

【本文地址】

vue实现自定义指令

vue实现自定义指令

今日新闻

推荐新闻